<script setup>
import {  onMounted,ref } from "vue";
import eventBus  from '../../event/eventBus.js';

const props = defineProps({
  name:String,
  icon:String,
  selectedIcon:String
});

let src = ref(props.icon);
let color = ref('#ffffff');
let label = ref('2D');

const onClick = () => {
  eventBus.emit('mapToolBarClick', props.name);
}

onMounted(() => {
  eventBus.on('mapToolBarClick', (data) => {
    if(data == props.name){
      src.value = props.selectedIcon;
      color.value = '#75FAFD';
      if(label.value == '2D'){
        label.value = '3D';
      }else{
        label.value = '2D';
      }

    }else{
      src.value = props.icon;
      color.value = '#ffffff';
      label.value = '3D';
    }
  });
});
</script>

<template>
  <button @click="onClick" style="background-image: url('/image/maptoolBarBtn.svg');background-size:36px;border: none;background-color: transparent;width:36px;height: 36px;">
    <img v-if="name !='2D'" :src="src" style="width:20px;height:20px" >
    <div v-else :style="{color: color}">
      {{label}}
    </div>
  </button>

</template>